<template>
  <div>
    <el-row type="flex" justify="space-between">
      <el-col :xs="12" :sm="8" :md="6" :lg="4">
        <div class="grid-content bg-purple">
          <el-link type="primary" icon="el-icon-s-home" :underline="false" href="/home/#/index">发版系统</el-link>
        </div>
      </el-col>
      <el-col :xs="12" :sm="8" :md="6" :lg="4">
        <el-row class="demo-avatar demo-basic">
          <el-col :span="8">
            <div class="block">
              <el-avatar shape="square" :size="60" :src="avatarUrl"></el-avatar>
            </div>
          </el-col>
          <el-col :span="8"><span class="username">{{username}}</span></el-col>
          <el-col :span="8">
            <el-button type="primary" icon="el-icon-switch-button" size="mini" @click="logout()">退出</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Constants from "@/components/util/Constants";
import { logout } from "@/components/api/header";

export default {
  name: "Header",
  data() {
    return {
      avatarUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      username: sessionStorage.getItem(Constants.USER_NAME)
    };
  },
  methods: {
    logout() {
      this.$confirm("确认关闭？")
        .then(_ => {
          let token = { token: sessionStorage.getItem(Constants.TOKEN) };
          logout(token, () => {
            sessionStorage.removeItem(Constants.TOKEN);
            sessionStorage.removeItem(Constants.USER_NAME);
            this.$router.replace(Constants.LOGIN);
          });
        })
        .catch(_ => {});
    }
  }
};
</script>

<!-- style 取消scoped 覆盖elementUI默认样式 -->
<style>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

/** 覆盖el-link 默认字体 */
.el-link--inner {
  font-size: 16px;
}

.username{
  font-family: 'Helvetica';
  font-size: 20px;
  font-weight: bold;
}
</style>
